<template>
  <div class="exam-container">
    <el-skeleton :loading="isFirst" :rows="10" animated>
    <el-descriptions title="新增组织" direction="vertical" :column="2" border>
      <!-- column为每行2列 如果列中将span设置为2 则何为1列 -->

      <el-descriptions-item label="名称" :width="750" :span="1">
        <el-input placeholder="在此输入组织名称" v-model="name"></el-input>
      </el-descriptions-item>

      <el-descriptions-item label="序号" :span="1">
        <el-input-number :min="1" :max="999" style="width: 100%" v-model="no"> </el-input-number>
      </el-descriptions-item>

      <el-descriptions-item label="职务(代表只有该职务员工才能成为负责人)" :span="1">
        <el-select
          v-model="zids"
          multiple
          :multiple-limit="5"
          collapse-tags
          collapse-tags-tooltip
          :max-collapse-tags="5"
          placeholder="负责人职务,可选择多个"
          style="width: 100%"
          @change="setlv"
        >
          <el-option v-for="item in zhiwuData" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-descriptions-item>

      <el-descriptions-item label="等级" :span="1">
        <el-input v-model="lv" disabled></el-input>
      </el-descriptions-item>

      <el-descriptions-item label="图标" :span="1">
        <el-input placeholder="在此输入图标代码" v-model="icon"></el-input>
      </el-descriptions-item>

      <el-descriptions-item label="上级组织" :span="1">
        <el-tag type="primary" v-if="parentName==null || parentName==''">无</el-tag>
        <el-tag type="primary" v-else>{{parentName}}</el-tag>
      </el-descriptions-item>

      <el-descriptions-item label="描述" :span="1">
        <el-input type="textarea" placeholder="组织描述" v-model="explain"></el-input>
      </el-descriptions-item>

      <el-descriptions-item label="" :span="2">
        <el-button
          type="primary"
          size="medium"
          @click="add"
          :disabled="name == '' || zids.length == 0"
          >新增</el-button
        >
      </el-descriptions-item>
    </el-descriptions>
  </el-skeleton>
  </div>
</template>
  
  <script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { getZhiwuList,addOrganization,getSingleOrganization } from '../../api/org'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import type addTreeOrgDto from '@/dto/org/addTreeOrgDto'

export default defineComponent({
  setup() {
    const router = useRouter();
    const routes=useRoute();
    const data = reactive<addTreeOrgDto>({
      isFirst:true,
      no: 1,
      name: '',
      num: 1,
      zids: [],
      explain: '',
      parent: null,
      parentName:'',
      icon: '',
      lv: 0,
      zhiwuData: [
        {
          id: '',
          name: ''
        }
      ]
    })

    const events = {
      //根据组织id获取单个组织
      getSingleOrganization(){
        getSingleOrganization({id:data.parent}).then((res:any)=>{
                if(res.result===0){
                     data.parentName=res.data.name;
                }
        })
      },
      //添加组织
      add() {
        ElMessageBox.confirm('确认新增吗').then(()=>{
          addOrganization({
            explain:data.explain,
            icon:data.icon,
            lv:data.lv,
            name:data.name,
            no:data.no,
            parent:data.parent,
            zids:data.zids
        }).then((res:any)=>{
             console.log(res);
             if(res.result===0){
                ElMessage.success("操作成功");
                ElMessageBox.confirm("是否还要继续新增?").then(()=>{
                      data.name='';
                }).catch(()=>{
                  router.go(-1);
                })
             }else{
                 ElMessage.error(res.message);
             }
             
        })
        }).catch(()=>{
         
        })
        
      },
      //选择职务/改变职务触发
      setlv() {
        const checkzhiwuLV: any = []
        data.zhiwuData.map((d: any) => {
          if (data.zids.includes(d.id)) {
            checkzhiwuLV.push(d.lv)
          }
        })
        //降序
        checkzhiwuLV.sort(function (a: any, b: any) {
          return b - a;
        })
        //等级复制 取最大
        if (checkzhiwuLV.length === 0) {
          data.lv = 0
        } else {
          data.lv = checkzhiwuLV[0];
        }

      },
      /**
       * 获取所有职务
       */
      getZhiwuLists() {
        getZhiwuList({ limit: 9999, page: 1 }).then((res: any) => {
          data.zhiwuData = res.data.data;
          data.isFirst=false;
        })
      }
    }

    onMounted(() => {
      data.parent=routes.params.id==null?null:routes.params.id.toString();
      if(data.parent!=null && data.parent!=''){
        events.getSingleOrganization();
      }
      events.getZhiwuLists();
    })
    return {
      ...toRefs(data),
      ...events
    }
  }
})
</script>
  